<template>
  <div class="main">
    <header>
      <div class="register-aliyun-topbar">
        <div class="aliyun-topbar-header">
          <div class="aliyun-topbar-element aliyun-logo">
            <a class="aliyun-logo-link" @click="toIndexPage">
              <img src="../../assets/logo.png" class="aliyun-logo-image" />
            </a>
            <span class="topbar-text">ResetPassword</span>
          </div>
        </div>
      </div>
    </header>
    <div class="ace-dpl-account">
      <div class="content">
        <a-form class="Loginform" :label-col="labelCol" :wrapper-col="wrapperCol">
          <div class="head">Engineering Service Request Platform</div>
          <div class="tips">
            <span class="tips-text">An existing account?</span>
            <router-link class="tips-link" :to="{name:'Login'}">Quick return &gt;</router-link>
          </div>
          <a-form-item label="NTID">
            <a-input size="large" autocomplete="false" v-model.trim="NTID" allowClear></a-input>
          </a-form-item>
          <a-form-item label=" Old Password">
            <a-input-password
              size="large"
              type="password"
              autocomplete="false"
              v-model.trim="oldPassword"
              allowClear
            >
              <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }" />
            </a-input-password>
          </a-form-item>

          <a-form-item label="New PassWord">
            <a-input-password
              size="large"
              type="password"
              autocomplete="false"
              v-model.trim="newPassword"
              allowClear
            >
              <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }" />
            </a-input-password>
          </a-form-item>
          <a-form-item label="Retype Password">
            <a-input-password
              size="large"
              type="password"
              autocomplete="false"
              v-model.trim="RetypePassword"
              allowClear
            >
              <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }" />
            </a-input-password>
          </a-form-item>
        </a-form>

        <div>
          <div class="fm-btn">
            <button
              type="submit"
              tabindex="3"
              class="fm-button fm-submit password-login"
              @click="submit"
            >Reset Password</button>
          </div>
          <!-- <div class="user-login-other">
            <div class="register" @click="resetDefaultPassword">Reset to default password</div>
          </div>-->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import userApi from '@/public/httpApi/user'
export default {
  name: 'ResetPassword',
  data() {
    return {
      labelCol: {
        xs: { span: 3 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 10 },
        sm: { span: 19 },
      },
      isLoginError: false,
      NTID: '',
      oldPassword: '',
      newPassword: '',
      userInfo: {},
      RetypePassword: '',
    }
  },
  created() {
    document.onkeydown = (e) => {
      if (e.keyCode == 13) {
        this.submit()
      }
    }
  },
  beforeDestroy() {
    document.onkeydown = ''
  },
  methods: {
    async submit() {
      const that = this
      if (this.NTID) {
        await userApi.getUserInfoById(this.NTID).then((result) => {
          this.userInfo = result.data[0]
        })
        console.log('this.userInfo :>> ', this.userInfo)
      }
      if (!this.NTID) {
        this.$message.warn('Please enter the NTID')
        return
      } else if (!this.oldPassword) {
        this.$message.warn('Please enter the old Password')
        return
      } else if (!this.newPassword) {
        this.$message.warn('Please enter the new Password')
        return
      } else if (
        this.userInfo.UserPwd &&
        this.oldPassword.toLowerCase() !== this.userInfo.UserPwd.toLowerCase()
      ) {
        this.$message.warn('Please enter the correct old password')
        return
      } else if (!this.RetypePassword) {
        this.$message.warn('Please enter the RetypePassword')
        return
      } else if (this.newPassword !== this.RetypePassword) {
        this.$message.warn(
          'The password and the duplicate password do not match'
        )
        return
      } else {
        const a = {
          method: 'SysUser_Mod',
          userId: window.userId || 1,
          sign: '1',
          currentPage: 0,
          limit: 0,
          datas: {
            UserPwd: this.newPassword,
            NTID: this.NTID,
          },
        }
        this.$post(a).then((result) => {
          if (result.code == 0) {
            that.$message.success('updated successfully!')
            that.userInfo.UserPwd = this.newPassword
            sessionStorage.setItem(
              'BackUserInfo',
              JSON.stringify([that.userInfo])
            )
            setTimeout(() => {
              that.$router.push({ name: 'Login' })
            }, 1000)
          }
        })
      }
    },
    resetDefaultPassword() {
      const that = this
      const a = {
        NTID: this.userInfo.NTID,
      }
      this.$confirm({
        title: 'warm prompt',
        content: 'Do you want to Reset this user password?',
        onOk() {
          userApi.resetUserPassword(a).then((result) => {
            console.log('result :>> ', result)
            if (result.code === 0) {
              that.userInfo.UserPwd = result.data[0].DefaultPassword
              that.$message.success(
                `Password reset successfully!Your password has been reset to ${that.userInfo.UserPwd}`
              )
              sessionStorage.setItem(
                'BackUserInfo',
                JSON.stringify([that.userInfo])
              )
            }
          })
        },
      })
    },
    getUserInfo() {
      const that = this
      const a = {
        method: 'SysUser_Que',
        userId: window.userId || 1,
        sign: '1',
        datas: {
          NTID: this.userInfo.NTID,
        },
      }
      that.$post(a).then((result) => {})
    },
    toIndexPage() {
      this.$router.push({ path: '/' })
    },
  },
}
</script>
<style lang="less" scoped>
@import url('css/resetPassword.less');
</style>
